<template>
	<view :style="{padding:'30rpx', background:pageData.bgColor,'--gradient-color':gradientColor,'--theme-color':pageData.themeColor,
        '--btn-color':btnColor}" v-if="act">
		<view class="bgwhite">
            <view class="main padding30-20 bor_radius_10">
                <view class="head d-flex j-sb">
                    <view class="d-flex a-center">
                        <image :src="$imgUrls(act.img)" mode="aspectFill" class="img m-right6" v-if="act.img"></image>
                        <view class="size32 color_22 bold600">{{ act.name }}</view>
                    </view>
                    <view class="d-flex a-center theme">
                        <view class="size22">距离活动结束:</view>
                        <!-- 倒计时 -->
                        <u-count-down :time="act.end_countdown*1000" format="DD:HH:mm:ss" @change="onChange">
                            <view class="d-flex a-center">
                                <view class="count" v-if="timeData.days!=undefined">{{ timeData.days<10?'0'+timeData.days:timeData.days }}</view>
                                <text class="size22">天</text>
                                <view class="count" v-if="timeData.hours!=undefined">{{ timeData.hours<10?'0'+timeData.hours:timeData.hours }}</view>
                                <text class="size22">时</text>
                                <view class="count" v-if="timeData.minutes!=undefined">{{ timeData.minutes<10?'0'+timeData.minutes:timeData.minutes }}</view>
                                <text class="size22">分</text>
                                <view class="count" v-if="timeData.seconds!=undefined">{{ timeData.seconds<10?'0'+timeData.seconds:timeData.seconds }}</view>
                                <text class="size22">秒</text>
                            </view>
                        </u-count-down>
                    </view>
                </view>
                <view class="goodslist bgwhite padding30-20 bor_radius_10 m-top30">
                    <!-- 一行一个 -->
                    <view class="list_1" v-if="pageData.listStyle == 1">
                        <view v-for="(item,index) in act.goods" :key="index" @click="toGoods(item.goods_id)">
                            <view class="d-flex m-bot20" v-if="index < pageData.count">
                                <image :src="$imgUrls(item.img)" mode="aspectFill" class="img"></image>
                                <view class="m-left20 d-flex f-column j-sb flex-1 hidden">
                                    <view>
                                        <view class="size30 bold300 ellipsis m-bot20">{{ item.name }}</view>
                                        <view class="d-flex a-center">
                                            <view v-if="item.group_info.members" class="m-right20">
                                                <u-avatar-group :urls="item.group_info.members" keyName="v_headimg" size="28" maxCount="6" gap="0.2"></u-avatar-group>
                                            </view>
                                            <view class="h6 bold300 color_99">已拼{{ item.group_info.success_group_count }}单</view>
                                        </view>
                                    </view>
                                    <view class="btn p-re text-center">
                                        <view class="left p-ab theme">
                                            <text class="size22">拼团价</text>
                                            <text class="size30 bold600">￥{{ item.open_group_price }}</text>
                                        </view>
                                        <view class="right p-ab">
                                            <text class="white h6">{{ item.open_group_price_name ? item.open_group_price_name : '一键开团' }}</text>
                                            <text class="iconfont icon-xiangyouxiayiye white h6"></text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <!-- 一行两个 -->
                    <view class="list_2 d-flex f-wrap j-sb" v-if="pageData.listStyle == 2">
                        <view v-for="(item,index) in act.goods" :key="index" class="item" @click="toGoods(item.goods_id)" v-show="index < pageData.count">
                            <image :src="$imgUrls(item.img)" mode="aspectFill" class="img"></image>
                            <view class="padding20">
                                <view class="size30 bold300 ellipsis m-bot12">{{ item.name }}</view>
                                <view class="h6 color_99 bold300 m-bot20">已拼{{ item.group_info.success_group_count }}单</view>
                                <view class="size30 bold600 theme">￥{{ item.price }}</view>
                            </view>
                        </view>
                    </view>
                    <!-- 一行三个 -->
                    <view class="list_3 d-flex f-wrap" v-if="pageData.listStyle == 3">
                        <view v-for="(item,index) in act.goods" :key="index" class="item" @click="toGoods(item.goods_id)" v-show="index < pageData.count">
                            <image :src="$imgUrls(item.img)" mode="aspectFill" class="img"></image>
                            <view class="padding10 m-bot10">
                                <view class="size28 bold300 ellipsis m-bot12">{{ item.name }}</view>
                                <view class="size22 color_99 bold300 m-bot18">已拼{{ item.group_info.success_group_count }}单</view>
                                <view class="size28 bold600 theme">￥{{ item.price }}</view>
                            </view>
                        </view>
                    </view>
                    <!-- 横向滑动 -->
                    <view class="list_4 d-flex" v-if="pageData.listStyle == 4">
                        <view v-for="(item,index) in act.goods" :key="index" class="item m-right20" @click="toGoods(item.goods_id)">
                            <image :src="$imgUrls(item.img)" mode="aspectFill" class="img"></image>
                            <view class="cont">
                                <view class="size26 bold300 ellipsis m-bot12">{{ item.name }}</view>
                                <view class="size22 color_99 bold300 m-bot18">已拼{{ item.group_info.success_group_count }}单</view>
                                <view class="size26 bold600 theme">￥{{ item.price }}</view>
                            </view>
                        </view>
                    </view>

                    <view class="size26 color_66 text-center p-top20 p-bot10" v-if="act.goods && pageData.count < act.goods.length && pageData.listStyle != 4"
                        @click="toUrl('/activityPage/seckill/index?act_id=' + act.act_id)">查看更多</view>
                </view>
            </view>
        </view>
	</view>
</template>

<script>
	export default {
		name:'seckill',
		props:['pageData'],
		data() {
			return {
				act: '',
                timeData: {}
			}
		},
		computed: {
            gradientColor(){
                let color = this.pageData.themeColor // 16进制
                if(!color) return
                let start = this.hexToRgba(color, .8) // rgba
                let end = this.hexToRgba(color, .05) // rgba
                return `linear-gradient(0deg, ${start}, ${end})` // 从下到上的渐变
            },
            btnColor(){
                let color = this.pageData.themeColor
                if(!color) return
                let start = this.hexToRgba(color, .8)
                let end = this.hexToRgba(color, .05)
                return `linear-gradient(-45deg, ${start}, ${end})`
            }
        },
        mounted(){
            this.getBlockInfo()
        },
		methods: {
            async getBlockInfo(){
                const result = await this.$getBlockInfo(this.pageData.list)
                if(result.list && result.list.length){
                    this.act = result.list[0]
                    // 处理头像组
                    if(!this.act.goods) return
                    this.act.goods.forEach(item=>{
                        if(item.group_info.members){
                            item.group_info.members = item.group_info.members.map(itm=>({
                                ...itm,
                                v_headimg: this.$imgUrls(itm.v_headimg)
                            }))
                        }
                    })
                }
            },
			hexToRgba(hex, opacity){
                return 'rgba(' + parseInt('0x' + hex.slice(1, 3)) + ',' + parseInt('0x' + hex.slice(3, 5)) + ',' + parseInt('0x' + hex.slice(5, 7)) + ',' + opacity + ')'
            },
            onChange(e){
                this.timeData = e
            }
		}
	}
</script>

<style lang="scss" scoped>
.main {
    background: var(--gradient-color);
}
.head {
    .img {
        width: 32rpx;
        height: 32rpx;
    }
    .count {
        width: 34rpx;
        line-height: 34rpx;
        background: var(--theme-color);
        border-radius: 4rpx;
        color: #fff;
        font-size: 24rpx;
        font-weight: bold;
        margin: 0 8rpx;
        text-align: center;
    }
}
.theme {
    color: var(--theme-color);
}
.goodslist {
    .list_1 { // 一行一个
        .img {
            width: 200rpx;
            height: 200rpx;
            object-fit: cover;
        }
        .btn {
            width: 100%;
            height: 60rpx;
            background: var(--btn-color);
            border-radius: 20rpx;
            line-height: 60rpx;
            .left {
                width: 240rpx;
                height: 60rpx;
                background: rgb(235, 238, 245);
                left: 0;
                top: 0;  
                border-radius: 20rpx 0 60rpx 20rpx;
                z-index: 20;
            }
            .right {
                width: 150rpx;
                height: 60rpx;
                right: 0; 
                top: 0;
                z-index: 10;
            }
        }
    }
    .list_2 { // 一行两个
        .item {
            width: 305rpx;
            padding: 0 10rpx;
            .img {
                width: 285rpx;
                height: 285rpx;
                object-fit: cover;
            }
        }
    }
    .list_3 { // 一行三个
        .item {
            width: 190rpx;
            margin-right: 20rpx;
            &:nth-child(3n){
                margin-right: 0;
            }
            .img {
                width: 100%;
                height: 190rpx;
                object-fit: cover;
            }
        }
    }
    .list_4 { // 横向滑动
        width: 100%;
		white-space: nowrap;
		overflow-x: scroll;
		overflow-y: hidden;
        .img {
            width: 160rpx;
            height: 160rpx;
            object-fit: cover;
        }
        .cont {
            width: 160rpx;
            padding: 10rpx;
            box-sizing: border-box;
        }
    }
}
</style>